import React from 'react';
import { useNavigate } from 'react-router-dom';

import { useNowPlaying } from '../../hooks/useFilm';

const NowPlaying = (props) => {
  const { list } = useNowPlaying();

  const navigate = useNavigate();
  return (
    <div>
      <ul>
        {list.map((item) => {
          return (
            <li
              key={item.filmId}
              onClick={() => navigate(`/film/detail/${item.filmId}`)}
            >
              {item.name}
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default NowPlaying;
